<template>
  <div>

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="专业名称">
        <el-input v-model="formInline.name" placeholder="请输入专业名称"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
      </el-form-item>
    </el-form>
    <br/>

    <el-row>
      <el-upload
          :action="this.$BASE_URL+'/system/importMajor'"
          :file-list="fileList"
          :limit="1"
          :headers="{'token':this.token}"
          accept=".xls,.xlsx"
          :on-success="handleSuccess"
          :on-progress="handlePreview"
          ref="upload">

        <el-button icon="el-icon-upload" slot="trigger" type="primary" style="margin-left: 10px">导入</el-button>

        <!--        <el-button-->
        <!--            type="warning"-->
        <!--            icon="el-icon-download"-->
        <!--            @click="downloadData"-->
        <!--            style="margin-left: 30px"-->
        <!--        >导出-->
        <!--        </el-button>-->
        <el-button
            type="success"
            icon="el-icon-circle-plus-outline"
            @click="openAddForm"
            style="margin-left: 30px"
        >新增
        </el-button>

        <div slot="tip" class="el-upload__tip" style="margin-left: 10px">只能上传xls或xlsx文件</div>
      </el-upload>

    </el-row>
    <br/>

    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column type="index" label="编号" width="65"/>
      <el-table-column
          prop="name"
          label="专业名称"

      >
      </el-table-column>
      <el-table-column
          prop="majorNumber"
          label="专业编码"

      >
      </el-table-column>
      <el-table-column
          prop="dname"
          label="二级学院"

      >
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">

          <el-tooltip content="删除" placement="top">
            <el-button
                @click="deleteMajor(scope.row)"
                type="danger"
                size="small"
                icon="el-icon-delete"
                circle

            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="专业信息" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="majorInfo" ref="majorInfoForm" :rules="rules">
<!--        <el-form-item label="专业编码" :label-width="formLabelWidth" prop="majorNumber">-->
<!--          <el-input v-model="majorInfo.majorNumber" autocomplete="off" style="width: 320px"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="专业名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="majorInfo.name" autocomplete="off" style="width: 320px"></el-input>
        </el-form-item>

        <el-form-item label="二级学院" :label-width="formLabelWidth" prop="deptNumber">
          <el-select v-model="majorInfo.deptNumber" placeholder="请选择所属二级学院" filterable
                     style="width: 320px">
            <el-option v-for="dept in deptList" :label="dept.dname" :value="dept.deptNumber"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlerAdd">确 定</el-button>
      </div>
    </el-dialog>


    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formInline.pageNumber"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="formInline.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
import axios from "axios";
import {Message} from "element-ui";
import pagination from "../layout/pagination";

export default {
  name: "majorManage",
  components: {
    pagination
  },
  created() {
    this.queryDept();
    this.query();

  },

  methods: {
    queryDept(params) {
      axios({
        url: this.$BASE_URL + "/system/getDepartmentList",
        headers: {
          token: this.token
        },
        params: params
      }).then(resp => {
        if (resp.data.code === 200) {
          this.deptList = resp.data.data;
        } else {
          Message.error(resp.data.msg)
        }
      }, err => {
        Message.error(err.msg)
      })

    },
    query() {
      axios({
        url: this.$BASE_URL + "/system/findMajorPage",
        params: this.formInline,
        headers: {
          token: this.token
        }
      }).then(resp => {
        if (resp.data.code === 200) {
          this.tableData = resp.data.data.list;
          this.total = resp.data.data.total;

        } else {
          Message.error(resp.data.msg)
        }

      }, err => {
        Message.error(err.msg)
      })

    },
    handleSizeChange(val) {
      this.formInline.pageSize = val
      this.query()
    },
    handleCurrentChange(val) {

      this.formInline.pageNumber = val
      this.query()
    },

    handlePreview() {
      this.$message("正在导入，请稍后... 导入所需时间可能较长，请在收到导入成功提示后继续操作")
    },
    handleSuccess(resp, file, fileList) {
      let message = {
        message: "恭喜，导入成功",
        type: "success"
      }
      if (resp.code != "200") {
        message.message = "对不起，导入失败：" + resp.msg
        message.type = "error"
      }
      this.$message(message)
    },


    handlerAdd() {

      let url = this.$BASE_URL + "/system/addMajor"

      this.$refs["majorInfoForm"].validate((valid) => {
        if (valid) {
          axios({
            url: url,
            headers: {
              token: this.token
            },
            method: "POST",
            params: this.majorInfo
          }).then(resp => {
            if (resp.data.code === 200) {
              Message.success(resp.data.msg)
              this.dialogFormVisible = false;
              this.query();
            } else {
              Message.error(resp.data.msg)
            }
          }, err => {
            Message.error(err.msg)
          })
        }
      })

    },
    openAddForm() {
      this.majorInfo = {
        name: '',
        majorNumber: '',
        deptNumber: '',
        dname: ''
      };
      this.dialogFormVisible = true;
      this.isAddMajor = true;
    },
    deleteMajor(row) {
      axios({
        url: this.$BASE_URL + "/system/deleteMajor",
        method: "POST",
        headers: {
          token: this.token
        },
        params: row
      }).then(resp => {
        if (resp.data.code === 200) {
          Message.success(resp.data.msg)
          this.query();
        } else {
          Message.error(resp.data.msg)
        }
      }, err => {
        Message.error(err.msg)
      })
    }
  },
  data() {
    return {
      fileList: [],
      deptList: [],
      formLabelWidth: "80px",
      majorInfo: {},
      rules: {
        name: [
          {required: true, message: '请输入专业名称', trigger: 'blur'}
        ],
        majorNumber: [
          {required: true, message: '请选择专业', trigger: 'change'}
        ],
        deptNumber: [
          {required: true, message: '请选择二级学院', trigger: 'change'}
        ],


      },
      dialogFormVisible: false,
      isAddMajor: false,
      token: localStorage.getItem("token"),
      total: 0,
      formInline: {
        name: '',
      },

      tableData: []

    }
  },


}
</script>
<style scoped>

</style>
